<template>
    <div class="book">
        <div class="book-body f f-jb pd-20">
            <div class="book-left">
                <div class="left-title f f-ac"><img src="@/assets/fire.png" />导航菜单</div>
                <div class="mt-10" v-for="(i, k) in typeList" :key="k">
                    <div class="nav-title">{{ i.name || "-" }}</div>
                    <div class="nav-item" v-for="(a, b) in i.arr" :key="b" :class="{ 'nav-checked': a.checked }"
                        @click="handleNav(k, b,a)">
                        {{ a.name || "-" }}
                    </div>
                </div>
            </div>
            <div class="book-right">
                <div class="book-top mb-20">
                    <div class="row f f-ac">
                        <div class="row-title">标题检索：</div>
                        <div class="f-1">
                            <el-input v-model="queryForm.search" placeholder="输入标题关键词" size="small" clearable
                                style="width: 408px" @change="search" />
                        </div>
                    </div>
                    <div class="row f f-ac">
                        <div class="row-title">类型：</div>
                        <div v-for="(i, k) in navList" :key="k" class="type-item"
                            :class="{ checked: queryForm.type == i.id }" @click="handleType(i)">
                            {{ i.name || "-" }}
                        </div>
                    </div>
                </div>
                <div class="book-bottom">
                    <div class="f f-js f-w">
                        <div v-for="(i, k) in dataList" :key="k" class="book-item" @click="handleDetail(i)">
                            <img :src="baseUrl +i.image" />
                            <div class="item-title line-1">{{ i.title || "-" }}</div>
                            <div class="item-author line-1">作者：{{ i.author || "-" }}</div>
                            <div class="item-icon f f-ac f-js">
                                <div @click.stop="handleLike(i)">
                                    <img class="icon" :src="i.is_like!=0 ? liked : like" />
                                    {{ i.like || 0 }}
                                </div>
                                <div @click.stop="handleCollect(i)">
                                    <img class="icon" :src="i.is_collect !=0 ? collected : collect" />
                                    {{ i.collect || 0 }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <Page-tool :size="queryForm.pageSize" :page="queryForm.currentPage" :total="total"
                        @change-page="changePage" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        bookList,
        bookCategory
    } from "@/utils/book/index.js";
    import {
        commonLike,
        commonCollect
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                like: require("../../assets/icon-like.png"),
                liked: require("../../assets/icon-liked.png"),
                collect: require("../../assets/icon-collect.png"),
                collected: require("../../assets/icon-collected.png"),
                queryForm: {
                    search: "", // 搜索关键词
                    type: "", // 场馆类型
                    pageSize: 12, // 条数
                    currentPage: 1, // 页数
                },
                total: 0, // 总数
                typeList: [],
                navList: [],
                dataList: [],
            };
        },

        mounted() {},
        created() {
            this.queryForm.search = this.$route.query.search ? this.$route.query.search :''
            this.getTypeList();
            this.getList();
        },
        methods: {
            search() {
                this.getList();
            },
            // 获取读好书列表
            getList() {
                let that = this
                let data = {
                    book_category_id: that.queryForm.type,
                    title: that.queryForm.search,
                    type: '',
                    page: that.queryForm.currentPage,
                    limit: 12,
                    recommend: ''
                }
                bookList(data).then((response) => {
                    that.dataList = response.data.list
                    that.total = response.data.count
                });
            },
            // 获取读好书分类
            getTypeList() {
                let that = this
                bookCategory().then((response) => {
                    response.data.data.unshift({
                        id: '',
                        name: "全部",
                    });
                    that.typeList = response.data.list
                    that.navList = response.data.data
                });
            },
            // 切换类型
            handleType(v) {
                this.queryForm.type = v.id;
                this.queryForm.currentPage = 1;
                this.typeList.forEach(i => {
                    i.arr.forEach(j =>{
                        j.checked = j.id == v.id
                    })
                })
                this.getList();
            },
            // 点赞
            handleLike(v) {
                commonLike({
                    id: v.id,
                    operate: v.is_like == 0 ? 1 : 2,
                    table: 5
                }).then((res) => {
                    this.getList();
                });
            },
            // 收藏
            handleCollect(v) {
                commonCollect({
                    id: v.id,
                    operate: v.is_collect == 0 ? 1 :2,
                    table: 5
                }).then((res) => {
                    this.getList();
                });
            },
            // 选择分类
            handleNav(index, a,p) {
                this.typeList[index].arr.forEach((item, b) => {
                    item.checked = a == b ? (item.checked ? false : true) : false;
                });
                this.queryForm.type = p.id
                this.getList();
            },
            // 查看详情
            handleDetail(v) {
                this.$router.push({
                    path: "/readBook/details",
                    query: {
                        id: v.id,
                    },
                });
            },
            // 切换页数
            changePage(page) {
                this.queryForm.currentPage = page;
                this.getList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .book {
        width: 100%;

        &-body {
            width: 1200px;
            min-height: 200px;
            margin: auto;

            .book-left {
                width: 284px;
                height: 100%;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

                .left-title {
                    color: #333;
                    font-size: 16px;
                    font-weight: 600;
                    padding: 20px;
                    border-bottom: 1px solid #d9d9d980;

                    >img {
                        width: 13px;
                        height: 15px;
                        margin-right: 10px;
                    }
                }

                .nav-title {
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    color: #fff;
                    font-size: 14px;
                    padding-left: 43px;
                    box-sizing: border-box;
                    background-color: #466ec5;
                    position: relative;

                    &::after {
                        content: "";
                        display: inline-block;
                        position: absolute;
                        right: 0;
                        width: 3px;
                        height: 42px;
                        background-color: #193980;
                    }
                }

                .nav-item {
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    color: #909090;
                    padding-left: 43px;
                    box-sizing: border-box;

                    &:hover {
                        cursor: pointer;
                        background-color: rgba(129, 153, 211, 0.21);
                        color: #193980;
                    }
                }

                .nav-checked {
                    color: #193980;
                    background-color: rgba(129, 153, 211, 0.21);
                }
            }

            .book-right {
                width: 892px;
                height: 100%;

                .book-top {
                    width: 100%;
                    border-radius: 8px;
                    padding: 20px;
                    box-sizing: border-box;
                    background-color: #fff;
                    box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

                    .row {
                        min-height: 36px;
                        width: 100%;
                        margin-bottom: 15px;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        &-title {
                            width: 90px;
                            color: #909090;
                            font-size: 14px;
                        }

                        .type-item {
                            display: inline-block;
                            min-width: 70px;
                            text-align: center;
                            height: 27px;
                            line-height: 27px;
                            color: #333;
                            background-color: #f4f4f4;
                            margin-right: 10px;
                            font-size: 12px;
                            border-radius: 3px;
                            padding: 0 10px;
                            box-sizing: border-box;

                            &:hover {
                                user-select: none;
                                cursor: pointer;
                            }
                        }

                        .checked {
                            color: #fff;
                            background-color: #193980;
                        }
                    }
                }

                .book-bottom {
                    width: 100%;
                    border-radius: 8px;
                    padding: 20px;
                    box-sizing: border-box;
                    background-color: #fff;
                    box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

                    .book-item {
                        margin-right: 24px;
                        margin-bottom: 20px;
                        width: 268px;
                        height: auto;
                        border-radius: 5px;
                        background-color: #fff;
                        overflow: hidden;
                        transition: all 0.5s;

                        &:hover {
                            cursor: pointer;
                            box-shadow: 0 1px 10px 0 rgba(130, 130, 130, 0.3);
                        }

                        &:nth-child(3n) {
                            margin-right: 0;
                        }

                        img {
                            width: 100%;
                            height: 161px;
                        }

                        .item-title {
                            height: 23px;
                            color: #000;
                            font-size: 16px;
                            font-weight: 600;
                            line-height: 23px;
                            margin: 8px 10px;
                        }

                        .item-author {
                            color: #909090;
                            font-size: 12px;
                            margin: 0 10px;
                        }

                        .item-icon {
                            margin: 10px;

                            >div {
                                user-select: none;
                                margin-right: 20px;
                                color: #a9a9aa;
                                font-size: 14px;
                            }

                            .icon {
                                width: 14px;
                                height: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>